<template>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-title">我是头部</div>
    <div class="header-right"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header {
    line-height: .44rem;
    height: .44rem;
    width: 100%;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 999;
  }
  .header-left {
    font-size: .15rem;
    position: absolute;
    display: block;
    left: 0.15rem;
    color: #333333;
  }
  .header-left::before {
    content: '';
    border-top: .01rem solid #f00000;
    border-left: .01rem solid #f00000;
    width: 0.12rem;
    height: 0.12rem;
    display: inline-block;
    transform: rotate(-45deg);
  }
  .header-title {
    font-size: .17rem;
    display: inline-block;
    color: #000000;
  }
</style>
